import React from 'react';
import { Icon } from './icon';
import { 
  faHome, 
  faUser, 
  faCog, 
  faSearch, 
  faHeart, 
  faStar, 
  faBell, 
  faEnvelope,
  faSpinner,
  faSync
} from '@fortawesome/free-solid-svg-icons';

/**
 * Icon 组件使用示例
 * 展示 Icon 组件的各种用法和功能特性
 */
export const IconExample: React.FC = () => {
  /**
   * 处理图标点击事件
   * @param iconName - 被点击的图标名称
   */
  const handleIconClick = (iconName: string) => {
    console.log('点击了图标:', iconName);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h2>Icon 组件示例</h2>
      
      {/* 示例1：基本图标 */}
      <h3>1. 基本图标</h3>
      <div style={{ display: 'flex', gap: '20px', marginBottom: '30px' }}>
        <Icon icon={faHome} title="首页" />
        <Icon icon={faUser} title="用户" />
        <Icon icon={faCog} title="设置" />
        <Icon icon={faSearch} title="搜索" />
        <Icon icon={faHeart} title="收藏" />
      </div>

      {/* 示例2：不同尺寸 */}
      <h3>2. 不同尺寸</h3>
      <div style={{ display: 'flex', alignItems: 'center', gap: '20px', marginBottom: '30px' }}>
        <Icon icon={faStar} size="xs" title="超小星星" />
        <Icon icon={faStar} size="sm" title="小星星" />
        <Icon icon={faStar} title="默认星星" />
        <Icon icon={faStar} size="lg" title="大星星" />
        <Icon icon={faStar} size="xl" title="超大星星" />
        <Icon icon={faStar} size="2xl" title="2倍星星" />
      </div>

      {/* 示例3：不同颜色 */}
      <h3>3. 不同颜色</h3>
      <div style={{ display: 'flex', gap: '20px', marginBottom: '30px' }}>
        <Icon icon={faHeart} color="#ff6b6b" title="红色爱心" />
        <Icon icon={faHeart} color="#4ecdc4" title="青色爱心" />
        <Icon icon={faHeart} color="#45b7d1" title="蓝色爱心" />
        <Icon icon={faHeart} color="#96ceb4" title="绿色爱心" />
        <Icon icon={faHeart} color="#feca57" title="黄色爱心" />
        <Icon icon={faHeart} color="#ff9ff3" title="粉色爱心" />
      </div>

      {/* 示例4：交互功能 */}
      <h3>4. 交互功能</h3>
      <div style={{ display: 'flex', gap: '20px', marginBottom: '30px' }}>
        <Icon 
          icon={faBell} 
          onClick={() => handleIconClick('bell')}
          title="可点击的铃铛"
        />
        <Icon 
          icon={faEnvelope} 
          onClick={() => handleIconClick('envelope')}
          title="可点击的信封"
        />
        <Icon 
          icon={faHeart} 
          disabled 
          title="禁用的爱心"
        />
      </div>

      {/* 示例5：动画效果 */}
      <h3>5. 动画效果</h3>
      <div style={{ display: 'flex', gap: '20px', marginBottom: '30px' }}>
        <Icon icon={faSpinner} spin title="旋转加载" />
        <Icon icon={faSync} spin title="同步旋转" />
        <Icon icon={faSpinner} pulse title="脉冲加载" />
      </div>

      {/* 示例6：组合使用 */}
      <h3>6. 组合使用</h3>
      <div style={{ 
        display: 'flex', 
        flexDirection: 'column', 
        gap: '10px', 
        maxWidth: '300px' 
      }}>
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '10px',
          padding: '10px',
          border: '1px solid #e0e0e0',
          borderRadius: '5px'
        }}>
          <Icon icon={faUser} size="lg" color="#007bff" />
          <span>用户个人资料</span>
        </div>
        
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '10px',
          padding: '10px',
          border: '1px solid #e0e0e0',
          borderRadius: '5px'
        }}>
          <Icon icon={faCog} size="lg" color="#6c757d" />
          <span>系统设置</span>
        </div>
        
        <div style={{ 
          display: 'flex', 
          alignItems: 'center', 
          gap: '10px',
          padding: '10px',
          border: '1px solid #e0e0e0',
          borderRadius: '5px'
        }}>
          <Icon icon={faSearch} size="lg" color="#28a745" />
          <span>搜索功能</span>
        </div>
      </div>
    </div>
  );
};

export default IconExample;